<template>
    <div class="right">
        <div class="right-top">
            <span>商品管理</span>
            <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u178.svg"
                alt="">
            <span>药物管理</span>
        </div>
        <div class="medicine">
            <RightTop></RightTop>
            <div class="bottom">
                <div class="bottom-left">
                    <div class="search">
                        <div class="searchs">
                            <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u251.svg"
                                alt="">
                            <input type="text" placeholder="药品类型">
                        </div>
                    </div>
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                                @close="handleClose">
                                <el-submenu index="1">
                                    <template slot="title">
                                        <span>中西药品</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="1-1">感冒咳嗽</el-menu-item>
                                        <el-menu-item index="1-2">补气养血</el-menu-item>
                                        <el-menu-item index="1-1">止疼镇痛</el-menu-item>
                                        <el-menu-item index="1-2">眼科用药</el-menu-item>
                                        <el-menu-item index="1-1">口腔用药</el-menu-item>
                                        <el-menu-item index="1-2">皮肤用药</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="2">
                                    <template slot="title">
                                        <span>营养健康</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="2-1">增强免疫</el-menu-item>
                                        <el-menu-item index="2-2">骨骼健康</el-menu-item>
                                        <el-menu-item index="2-1">调节三高</el-menu-item>
                                        <el-menu-item index="2-2">缓解疲劳</el-menu-item>
                                        <el-menu-item index="2-1">养肝护肝</el-menu-item>
                                        <el-menu-item index="2-2">改善睡眠</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="3">
                                    <template slot="title">
                                        <span>滋补养生</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="3-1">阿胶</el-menu-item>
                                        <el-menu-item index="3-2">蜂蜜/蜂产品</el-menu-item>
                                        <el-menu-item index="3-1">枸杞</el-menu-item>
                                        <el-menu-item index="3-2">燕窝</el-menu-item>
                                        <el-menu-item index="3-1">人参</el-menu-item>
                                        <el-menu-item index="3-2">袍子粉</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="4">
                                    <template slot="title">
                                        <span>护理</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="4-1">口罩</el-menu-item>
                                        <el-menu-item index="4-2">跌打损伤</el-menu-item>
                                        <el-menu-item index="4-1">创可贴</el-menu-item>
                                        <el-menu-item index="4-2">美体护理</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                            </el-menu>
                        </el-col>

                    </el-row>
                </div>
                <div class="bottom-right">
                    <div class="name1">
                        感冒咳嗽
                    </div>
                    <div class="name2">
                        <div class="nav">
                            <select name="" id="">
                                <option value="">品牌</option>
                                <option value="">选项一</option>
                                <option value="">选项二</option>
                                <option value="">选项三</option>
                            </select>
                            <select name="" id="">
                                <option value="">药品剂型</option>
                                <option value="">选项一</option>
                                <option value="">选项二</option>
                                <option value="">选项三</option>
                            </select>
                            <div class="nav1">
                                <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u251.svg" alt="">
                                <input type="text" placeholder="搜索医生名称">
                            </div>
                        </div>
                        <div class="navs">
                            <span class="addx">+ 添加药品</span>
                            <span class="batch">批量导入/导出</span>
                        </div>
                    </div>
                    <ul class="SelectMedicine">
                        <li class="li-top">
                            <div class="li1">
                                序号
                            </div>
                            <div class="li1">
                                图片
                            </div>
                            <div class="li1">
                                名称
                            </div>
                            <div class="li1">
                                药品分类
                            </div>
                            <div class="li1">
                                药品剂型
                            </div>
                            <div class="li1">
                                价格
                            </div>
                            <div class="li1">
                                库存
                            </div>
                            <div class="li1">
                                品牌
                            </div>
                            <div class="li1">
                                操作
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import RightTop from './RightTop.vue';
export default {
    components: {
        RightTop
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}

</script>

<style scoped>
    .bottom-left>>>.el-col-12{
        width: 100% !important;
    }
    .bottom-left>>>.el-submenu__title{
        text-align: left !important;
    }
    .bottom-left>>>.el-menu-item{
        color: #7e7d7d;
    }
</style>
<style lang="scss" scoped>
.right {
    width: 100%;
    height: 874px;
    padding: 0 12px;
    box-sizing: border-box;

    .right-top {
        height: 44px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        span {
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            color: #333;
        }

        span:nth-of-type(1) {
            color: #8c8c8c;
        }

        img {
            width: 7px;
            height: 14px;
            margin: 0 5px;
        }
    }

    .medicine {
        width: 100%;
        height: 818px;
        background-color: #fff;
        border-radius: 4px;

        .bottom {
            width: 100%;
            max-height: 770px;
            display: flex;
            .bottom-left {
                width: 200px;
                height: 770px;
                // padding-left: 20px;
                border-right: 1px solid #ccc;
                overflow: hidden;
                position: relative;
                .tac{
                    position: absolute;
                    width: 200px;
                    height: 770px;
                    top: 40px;
                    overflow-y: scroll;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }
                .search{
                    width: 200px;
                    height: 40px;
                    line-height: 40px;
                    padding-top: 8px;
                    display: flex;
                    justify-content: center;
                    .searchs{
                        width: 180px;
                        height: 30px;
                        position: relative;
                        border: 1px solid #ccc;
                        display: flex;
                        align-items: center;
                        border-radius: 3px;
                        img{
                            width: 14px;
                            height: 14px;
                            position: absolute;
                            top: 7px;
                            left: 10px;
                        }
                        input{
                            width: 180px;
                            height: 30px;
                            padding-left: 30px;
                            box-sizing: border-box;
                            border: none;
                            outline: none;
                            border-radius: 3px;
                        }
                    }
                }
            }
            .bottom-right{
                flex: 1;
                padding: 0 15px;
                box-sizing: border-box;
                overflow: hidden;
                .name1{
                    height: 40px;
                    line-height: 40px;
                    font-size: 18px;
                    color: #333;
                    text-align: left;
                }
                .name2{
                    width: 100%;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .nav{
                        width: 70%;
                        display: flex;
                        align-items: center;
                        select{
                            width: 100px;
                            height: 30px;
                            line-height: 30px;
                            margin-right: 20px;
                            border: 1px solid #ccc;
                            border-radius: 2px;
                            color: #949090;
                        }
                        .nav1{
                            width: 180px;
                            height: 30px;
                            display: flex;
                            position: relative;
                            border: 1px solid #ccc;
                            border-radius: 3px;
                            img{
                                position: absolute;
                                top: 7px;
                                left: 9px;
                                width: 14px;
                                height: 14px;
                            }
                            input{
                                width: 150px;
                                padding-left: 30px;
                                outline: none;
                                border: none;
                                border-radius: 3px;
                            }
                        }
                    }
                    .navs{
                        width: 30%;
                        display: flex;
                        justify-content: right;
                        .addx{
                            padding: 0 10px;
                            height: 30px;
                            line-height: 30px;
                            font-size: 12px;
                            color: #fff;
                            background: #007fff;
                            border-radius: 3px;
                            border: 1px solid #ccc;
                        }
                        .batch{
                            padding: 0 10px;
                            height: 30px;
                            line-height: 30px;
                            font-size: 12px;
                            color: #333;
                            margin-left: 15px;
                            border: 1px solid #ccc;
                            border-radius: 3px;
                        }
                    }
                }
                .SelectMedicine{
                    list-style: none;
                    width: 100%;
                    height: auto;
                    .li-top{
                        width: 100%;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 10px;
                        box-sizing: border-box;
                        background: #f2f2f2;
                        // border-bottom: 1px solid #ccc;
                        .li1{
                            width: auto;
                            height: 40px;
                            font-size: 13px;
                            color: #000;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                        }
                    }
                }
            }
        }

    }
}
</style>